import React, { useEffect, useState } from 'react'
import { Pie } from '@ant-design/plots'
import { request } from '../../../api/request'

const UserType: React.FC = () => {
  const [data, setData] = useState([] as any)

  useEffect(() => {
    request.get({ url: '/dashboard/goodsTypeNum' }).then((res) => {
      if (res.data !== null) {
        setData(res.data)
      }
    })
  }, [])

  const config = {
    appendPadding: 10,
    data,
    angleField: 'total',
    colorField: 'title',
    radius: 0.8,
    label: {
      type: 'outer',
      content: '{name} {percentage}',
    },
    interactions: [
      {
        type: 'pie-legend-active',
      },
      {
        type: 'element-active',
      },
    ],
  }
  return <Pie {...config} />
}

export default UserType
